<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
	<script src="./lib/axios.js"></script>
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>
</body>





<script>
	axios.defaults.baseURL = "http://124.223.14.236:3001/api"

	async function fn() {
		document.querySelector('#province').addEventListener('change', function () {
			document.querySelector('#county').innerHTML = `	<option value="">请选择区县</option>`

		})



		const { data: a } = await axios.get('/city/province')
		const sheng = a.data.map(function (item) {
			return `	<option value="${item.province}">${item.name}</option>`

		}).join('')
		document.querySelector('#province').innerHTML = `	<option value="">请选择省份</option>` + sheng


		document.querySelector('#province').addEventListener('change', async function () {

			const { data: b } = await axios.get('/city/city', {
				params: {
					provinceCode: this.value
				}
			})
			const city = b.data.map(function (item) {
				// console.log(item);
				return `<option value="${item.city}">${item.name}</option>`
			}).join('')
			document.querySelector('#city').innerHTML = `	<option value="">请选择区县</option>` + city
		})





		document.querySelector('#city').addEventListener('change', async function () {

			const { data: z } = await axios.get('/city/area', {
				params: {
					provinceCode: document.querySelector('#province').value,
					cityCode: this.value
				}

			})
			console.log(z);
			const qu = z.data.map(function (item) {
				return `<option value="">${item.name}</option>`
			}).join('')
			document.querySelector('#county').innerHTML = qu

		})








	}
	fn()





</script>















<!-- <script>
	axios.defaults.baseURL = "http://124.223.14.236:3001/api"
	async function fn() {
		const a = await axios.get('/city/province')
		const one = a.data.data.map(function (item) {
			return `<option value="${item.province}">${item.name}</option>    `
		}).join('')

		document.querySelector('#province').innerHTML = `<option value="">请选择省份</option>` + one
		document.querySelector('#province').value = 34
		document.querySelector('#province').addEventListener('change', async function () {
			const num = document.querySelector('#province').value
			// console.log(num)
			const two = await axios.get('/city/city', {
				params: { provinceCode: num }

			})



		})
		document.querySelector('#province').addEventListener('change', async function () {

			const two = await axios.get('/city/city', {
				params: { provinceCode: this.value }
			})
			const city = two.data.data.map(function (item) {
				// console.log(item);
				return `<option value="${item.city}">${item.name}</option> `
			}).join('')
			document.querySelector('#city').innerHTML = `<option value="">请选择城市</option>` + city
		})


		document.querySelector('#city').addEventListener('change', async function () {
			// const nu = this.value
			// const cs = document.querySelector('#province').value
			// console.log(nu, cs);
			const chs = await axios.get('/city/area', {
				params: {
					provinceCode: document.querySelector('#province').value,
					cityCode: this.value,
				}
			})
			console.log(this.value, document.querySelector('#province').value);
			console.log(chs);
			// const city = two.data.data.map(function (item) {
			// 	console.log(item);
			// 	return `<option value="${item.city}">${item.name}</option> `
			// }).join('')
			// document.querySelector('#city').innerHTML = `<option value="">请选择城市</option>` + city




		})










	}
	fn() -->



<!-- </script> -->



















<script src="./js/index.js"></script>

</html>